<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <!-- <templateslot slot="before">这是左侧的内容</templateslot> -->
        <!-- <template v-slot:before>这是左侧的内容</template> -->
        <template #before>共{{ total }}条记录</template>
        <!-- <template slot="after"> -->
        <template #after>
          <el-button size="small" type="warning" @click="$router.push('/employees/import')">导入</el-button>
          <el-button size="small" type="danger" @click="exportToExcel">导出</el-button>
          <el-button size="small" type="primary" @click="isShowDialog=true">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="list">
          <el-table-column prop="index" label="序号" sortable="" align="center" />
          <el-table-column prop="username" label="姓名" sortable="" align="center" />
          <el-table-column prop="mobile" label="手机号" sortable="" width="120px" align="center" />
          <el-table-column prop="workNumber" label="工号" sortable="" align="center" />
          <el-table-column prop="formOfEmployment" label="聘用形式" sortable="" width="120px" :formatter="formOfEmployment" align="center" />
          <el-table-column prop="departmentName" label="部门" sortable="" align="center" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable="" width="120px" align="center">
            <template #default="scope">
              <!-- 通过过滤器进行时间格式化 -->
              {{ scope.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="enableState" label="账户状态" sortable="" width="110px" align="center">
            <template v-slot="scope">
              <!-- 没有名字的 slot 可以 👇 这样写 -->
              <!-- <template #default="scope"> -->
              <!-- <template v-slot:default="scope"> -->
              <el-switch
                :value="scope.row.enableState"
                :active-value="1"
                :inactive-value="0"
              />
              <!-- <el-switch
                v-model="scope.row.enableState"
                disabled
                :active-value="1"
                :inactive-value="0"
              /> -->
              <!-- {{ scope.row.enableState }} -->
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="scope">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="ShowRoleDialog(scope.row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageConfig.size"
            :current-page="pageConfig.page"
            :total="total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <add-employee :is-show-dialog="isShowDialog" />
      <assign-role ref="assignRole" :is-show-role-dialog="isShowRoleDialog" @closeRoleDialog="close" />
    </div>
  </div>
</template>

<script>
import { getEmployeeAPI, delEmployeeAPI } from '@/api/employees'
import EmployeeEnum from '@/constant/employees'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { Message } from 'element-ui'
import AddEmployee from '@/views/employees/components/add-employee.vue'
import { formatDate } from '@/filters'
import AssignRole from '@/views/employees/components/assign-role.vue'
export default {
  components: { AddEmployee, AssignRole },
  data() {
    return {
      pageConfig: {
        page: 1,
        size: 6
      },
      list: [],
      total: 0,
      isShowDialog: false,
      isShowRoleDialog: false
    }
  },
  created() {
    this.onload()
  },
  methods: {
    async delEmployee(id) {
      await this.$confirm('真的要删除该员工吗')
      await delEmployeeAPI(id)
      Message.success('删除成功')
      this.onload()
    },
    async onload() {
      const res = await getEmployeeAPI(this.pageConfig)
      this.list = res.rows.map((item, index) => {
        const num = (this.pageConfig.page - 1) * this.pageConfig.size + index + 1
        return {
          ...item, index: num >= 10 ? num : '0' + num
        }
      })
      console.log(this.list)
      // this.list = res.rows
      this.total = res.total
    },
    changePage(pageNum) {
      this.pageConfig.page = pageNum
      this.onload()
    },
    formOfEmployment(row, column, cellValue, index) {
      // returnre cellValue === 1 ? '正式电池' : '临时电池'

      // 这个函数, 会在每个格子渲染的时候都被调用, 默认传入当前行,当前列,当前格子,和索引四个形参
      // 这里的返回值会替代当前的格子数据

      // 可以将所有可能的情况, 放在一个数组中进行管理
      // 在专业术语上, 将所有可能性列举出来的数据形式叫做 "枚举"

      // const hireType = [
      //   { id: 1, value: '正式' },
      //   { id: 2, value: '非正式' },
      //   { id: 3, value: '实习生' },
      //   { id: 4, value: '顾问' }
      // ]
      // const res = hireType.find(item => { return item.id === cellValue })

      const res = EmployeeEnum.hireType.find(item => { return item.id === +cellValue })
      return res ? res.value : '未知工种'
    },
    async exportToExcel() {
      // const header = ['姓名', '工号', '聘用形式', '部门', '入职时间']
      const res = await getEmployeeAPI({ page: 1,
        size: this.total })

      // 定义字典, 里面以key:value 键值对的形式配对 表头和对应要拿的数据字段名
      const dict = {
        '用户名': 'username',
        '手机号': 'mobile',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment',
        '入职时间': 'timeOfEntry'
      }

      const header = Object.keys(dict)

      const data = res.rows.map(item => {
        const user = []
        for (const cnKey in dict) {
          const enKey = dict[cnKey]
          const val = item[enKey]
          // 如果是聘用形式
          if (enKey === 'formOfEmployment') {
            const obj = EmployeeEnum.hireType.find(el => el.id === +val)
            const formOfEmployment = obj ? obj.value : '未知'
            user.push(formOfEmployment)
          // 如果是入职日期
          } else if (enKey === 'timeOfEntry') {
            user.push(formatDate(val))
          // 都不是，正常推
          } else {
            user.push(val)
          }
        }
        return user
      })
      // const data = res.rows.map(item => {
      //   const user = []
      //   user.push(item.username)
      //   user.push(item.workNumber)

      //   // 特殊数据一, 聘用形式, 将数据中的数字用枚举数据转成字符串
      //   const obj = EmployeeEnum.hireType.find(el => el.id === item.formOfEmployment)
      //   const formOfEmployment = obj ? obj.value : '未知'
      //   user.push(formOfEmployment)

      //   user.push(item.departmentName)

      //   // 特殊数据二, 对于时间处理, 可以使用之前的过滤器函数
      //   // 注意这里没法用过滤器, 可以将注册过滤器的函数直接引入使用即可
      //   user.push(formatDate(item.timeOfEntry))
      //   // user.push(item.timeOfEntry)
      //   return user
      // })
      export_json_to_excel({
        // header: ['姓名', '年龄'], // 表头 必填
        header,
        // data: [
        //   ['小明', 18],
        //   ['小红', 23]
        // ]// 具体数据 必填
        data
      })
    },
    async ShowRoleDialog(id) {
      await this.$refs.assignRole.getUserDetail(id)
      this.isShowRoleDialog = true
    },
    close() {
      this.isShowRoleDialog = false
    }
  }
}
</script>

  <style>

  </style>
